<template>
	<view>
		<view class="title" style="padding: 100rpx 0rpx 40rpx;">
			<view class="topTitle">
				全部分类
			</view>
			<view class="topView flex-row-space-between">
				<view class="searchView flex1 flex-row-flex-start">
					<image class="searchImage" src="/static/common/search.png" mode="scaleToFill"></image>
					<input v-model="keyword" placeholder="搜索关键字" @confirm="onSearch" class="searchInput flex1" type="text">
				</view>
			</view>
		</view>
		<view class="contentView flex-row-center">
			<view class="contentView fixed">
				<scroll-view class="scroll" scroll-y="true">
					<view v-for="(item,index) in leaseClassifyList" :key="index">
						<view @tap="onClassify(item.id)" :class="{'classItem1': classify_id == item.id}"
							class="classItem flex-column-center">
							{{item.name}}
						</view>
					</view>

				</scroll-view>
			</view>
			<view class="contentView1 fixed">
				<scroll-view class="scroll1" scroll-y="true">
					<view v-for="(item,index) in goodsList" :key="index">
						<view @click="itemClick(item)" class="goodsItem flex-row-flex-start">
							<image class="goodsImage" :src="item.image" mode="aspectFill"></image>
							<view class="">
								<view class="name">
									{{item.name}}
								</view>
								<view class="" style="margin-top: 20rpx;">
									<text class="price" style="margin-right: 4rpx;">¥</text>
									<!-- 整数 -->
									<text class="price1">{{item.price}}</text>

									<!-- 单位 -->
									<text class="price">{{ item.is_unit == 1 ? '/天' : '/月' }}起</text>
								</view>
							</view>

						</view>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLeaseClassify,
		getLeaseGoodsList
	} from '@/api/lease.js';

	import {
		getSearchpage,
		clearSearch
	} from '@/api/store';

	import {
		loadingFun,
		formatPrice
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type';


	export default {
		data() {
			return {
				keyword: '', // 搜索内容
				status: loadingType.LOADING, // 加载状态
				page: 1, // 当前数据页面
				goodsType: 'double', // 商品列表样式展示方式
				goodsList: [], // 商品列表数据
				priceSort: '', // 价格排序
				saleSort: '', // 销量排序
				classify_id: '', // 分类ID
				showHistory: false, // 显示搜索历史
				historyList: [], // 搜索历史数据列表
				hotList: [], // 热门搜素数据列表
				leaseClassifyList: [], // 租赁分类列表
			};
		},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) this.showHistory = true
			},
			// 是否处于搜索
			showHistory(value) {
				if (value) this.getSearchpageFun();
			}
		},
		computed: {
			comprehensive() {
				const priceSort = this.priceSort;
				const saleSort = this.saleSort;

				return (!priceSort && !saleSort) ? true : false;
			}
		},

		onLoad(options) {
			this.classify_id = options.classify_id
			// 获取分类列表数据
			getLeaseClassify().then(res => {
				if (res.code != 1) return;
				this.leaseClassifyList = res.data;
				// this.classify_id = res.data[0].id || '';
				// 商品列表数据请求
				this.getGoodsList();
			});
		},

		// 上拉加载更多数据
		onReachBottom() {
			this.getGoodsList();
		},

		methods: {
			// 格式化价格输出
			formatPrice,
			itemClick(item) {
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' +
						'?' + 'id=' + item.id
				})
			},
			// 更改商品排序样式
			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},

			// 清空搜索记录
			clearSearchHistory() {
				clearSearch().then(res => {
					if (res.code != 1) return;
					this.getSearchpageFun();
				});
			},

			// 点击取消搜索
			onCancelSearch() {
				this.showHistory = false;
				// this.onRefresh();
			},

			// 点击分类
			onClassify(goods_id) {
				this.classify_id = goods_id;
				this.onRefresh();
			},

			// 点击综合
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

			// 点击价格排序
			onPriceSort() {
				this.saleSort = ''
				this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

			// 点击销量排序
			onSaleSort() {
				this.priceSort = ''
				this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
				this.onRefresh();
			},

			// 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code != 1) return;
					const data = res.data;
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				});
			},

			// 搜索
			onSearch() {
				this.showHistory = true
				this.onRefresh();
			},

			// 刷新列表数据
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => this.getGoodsList());
			},

			// 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item;
				this.showHistory = false;
				this.onRefresh();
			},

			// 获取商品列表数据
			getGoodsList() {
				if (this.status == loadingType.FINISHED) return;
				// 参数
				const field = {
					category_id: this.classify_id,
					keyword: this.keyword,
					price: this.priceSort,
					sales_sum: this.saleSort,
				}
				// 请求
				loadingFun(
					getLeaseGoodsList,
					this.page,
					this.goodsList,
					this.status,
					field
				).then(res => {
					console.log(res);
					if (!res) return;
					this.page = res.page;
					this.goodsList = res.dataList;
					this.status = res.status;
				});
			},

			// 查看商品详情
			goGoodsDetail(goods_id) {
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_details/lease_goods_details' +
						'?' + 'id=' + goods_id
				})
			}
		}
	};
</script>

<style scoped>
	.title{
		background: linear-gradient(180deg, rgba(255, 110, 22, 0.5) 0%, rgba(255, 110, 22, 0) 100%);
	}
	.topView {
		/* margin-top:80rpx ; */
		height: 104rpx;
	}
	
	.topTitle {
		margin-left: 68rpx;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 47rpx;
		font-family: PingFang HK-Regular, PingFang HK;
		font-weight: 700;
		color: #000;
	}

	.searchView {
		padding: 20rpx 40rpx;
		margin: 0 20rpx;
		width: 710rpx;
		height: 72rpx;
		background: #F1F5F8;
		border-radius: 36rpx 36rpx 36rpx 36rpx;

	}

	.searchImage {
		margin-right: 20rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.searchInput {
		background: #F1F5F8;
	}

	.contentView {
		/* margin-top: 104rpx; */
		position: relative;
		width: 100%;
		height: calc(100vh - 400rpx - var(--window-top) - var(--window-bottom));
		background-color: #fff;
	}

	.contentView {
		left: 0;
		width: 206rpx;
		height: calc(100vh - 400rpx - var(--window-top) - var(--window-bottom));
		background: #F6F9FB;


	}

	.contentView1 {
		right: 0;
		left: 206rpx;

		height: calc(100vh - 400rpx - var(--window-top) - var(--window-bottom));
		background: #FFFFFF;


	}

	.scroll {
		height: calc(100vh - 390rpx - var(--window-top) - var(--window-bottom));

	}

	.scroll1 {
		height: calc(100vh - 390rpx - var(--window-top) - var(--window-bottom));
	}

	.classItem {
		width: 100%;
		height: 95rpx;
		font-size: 27rpx;
		font-family: PingFang HK-Medium, PingFang HK;
		font-weight: 500;
		color: #333333;
	}

	.classItem1 {

		background: #FFFFFF;

	}

	.goodsItem {
		width: 100%;
		padding: 30rpx;
	}

	.goodsImage {
		margin-right: 20rpx;
		width: 141rpx;
		height: 160rpx;
	}

	.price {
		font-size: 19rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #FF5B5B;
	}

	.price1 {
		font-size: 38rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #FF5B5B;
	}

	.name {
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}
</style>